<template>
	<view class="warp">
		<!-- 顶部 start -->
		<!-- #ifdef WEB -->
		<view class="navbar_top">
			<uv-navbar leftText="返回" :fixed="false" title="收藏列表" border :safeAreaInsetTop="false" :placeholder="true" @leftClick="jumpUrl('1','navigateBack')" @rightClick="jumpUrl('/pages/index/index','redirectTo')">
				<template v-slot:left>
					<view class="uv-nav-slot">
						<uv-icon name="arrow-left" size="19"></uv-icon>
					</view>
				</template>
				<template v-slot:right>
					<view class="uv-nav-slot">
						<uv-icon name="home" size="19"></uv-icon>
					</view>
				</template>
			</uv-navbar>
		</view>
		<uv-gap height="44" bgColor="#F1F1F5"></uv-gap>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<uv-navbar leftText="返回" :fixed="true" title="收藏列表" border :safeAreaInsetTop="true" :placeholder="true" @leftClick="jumpUrl('1','navigateBack')" @rightClick="jumpUrl('/pages/index/index','redirectTo')">
			<template v-slot:left>
				<view class="uv-nav-slot">
					<uv-icon name="arrow-left" size="19"></uv-icon>
				</view>
			</template>
			<template v-slot:right>
				<view class="uv-nav-slot">
					<uv-icon name="home" size="19"></uv-icon>
				</view>
			</template>
		</uv-navbar>
		<!-- #endif -->
		<!-- 顶部 end -->
		<!-- 列表 start -->
		<view class="course_list">
			<view class="course_item" v-for="(v,k) in rows" :key="k" @click="jumpUrl(`/pages/course/details?id=${v.course_id}&lesson_id=${v.lesson_id}`)">
				<view class="course_img">
					<image :src="v.image" mode="aspectFill"></image>
				</view>
				<view class="course_r">
					<view class="course_title line_2">
						{{v.name}}
					</view>
					<view class="course_author">
						讲师：{{v.author_name}}
					</view>
					<view class="course_other">
						<view class="course_icon">
							<uv-icon name="play-circle-fill" color="#999" size="24"></uv-icon>
							<view class="course_icon_text">{{v.lesson_num}}</view>
						</view>
						<view class="course_icon">
							<uv-icon name="eye-fill" color="#999" size="24"></uv-icon>
							<view class="course_icon_text">{{v.click}}</view>
						</view>
					</view>
					<view class="course_time">
						<view class="course_icon">
							<uv-icon name="clock" color="#999" size="24"></uv-icon>
							<view class="course_icon_text">{{v.createtime_text}}</view>
						</view>
					</view>
				</view>
			</view>
			<uv-load-more :status="apiStatus" v-if="rows.length > 0" />
			<uv-empty v-if="rows.length == 0" text="收藏为空" mode="data"></uv-empty>
			
		</view>
		<!-- 列表 end -->
		<!-- 底部tabbar start -->
		<bastTabbar :tabbar_index="1000"></bastTabbar>
		<!-- 底部tabbar end -->
	</view>
</template>

<script>
	import bastTabbar from '@/component/base-tabbar.vue'
	export default {
		components: {
			bastTabbar,
		},
		onReachBottom() {
			console.log('onReachBottom')
			this.page++
			this.collect_list()
		},
		onLoad() {
			this.collect_list()
		},
		data() {
			return {
				//
				status: 'loadmore',
				rows: [],
				//
				page: 1,
				pagesize: 10,
				apiMore: true,
				apiStatus: 'loadmore',
				apiPost: false,
			}
		},
		methods: {
			async collect_list() {
				if (this.apiPost || this.apiMore===false) {
					return false
				}
				const res = await this.$myRequest({
					url: "course/collect_list",
					type: "post",
					data: {page:this.page},
				});
				if(res.code){
					this.apiMore = res.data.length < this.pagesize ? false : true
					this.apiStatus = res.data.length < this.pagesize ? "nomore" : "loadmore";
					this.rows = this.rows.length > 0 ? [...this.rows, ...res.data] : res.data
				} else {
					uni.showToast({
						title: res.msg,
						icon: "error"
					})
					this.apiMore = false
					this.apiStatus = 'nomore'
				}
			},
		}
	}
</script>

<style lang="scss">
	.warp{
		background-color: #FFF;
		min-height: 100vh;
		max-width: 1600rpx;
		margin: auto;
		.navbar_top{
			z-index: 1000;background-color: red;position: relative;
			.uv-navbar{
				position: fixed;
				width: 100%;
				max-width: 1600rpx;
			}
		}
		// 列表
		.course_list{
			padding: 0rpx 20rpx 20rpx 20rpx;
			background-color: #fff;
			.course_item{
				display: flex;
				margin-top: 20rpx;
				border-bottom: 1px dashed #dcdcdc;
				padding-bottom: 20rpx;
				.course_img{
					margin-right: 20rpx;
					image{
						width: 37vw;
						height: 30vw;
						max-width: 400rpx;
						max-height: 300rpx;
					}
				}
				.course_r{
					flex: 1;
					.course_author{
						margin-top: 10rpx;
					}
					.course_other{
						margin-top: 10rpx;
						display: flex;
						align-items: center;
						.course_icon{
							display: flex;
							align-items: center;
							margin-right: 20rpx;
							.course_icon_text{
								margin-left: 10rpx;
							}
						}
					}
					.course_time{
						margin-top: 10rpx;
						.course_icon{
							display: flex;
							align-items: center;
							margin-right: 20rpx;
							.course_icon_text{
								margin-left: 10rpx;
								color: #999;
							}
						}
					}
				}
			}
			
		}
		
	}
</style>